<template>
  <div class="third-login">
    <div class="content">
      <div class="user-info">
        <i class="jeicon jeicon-mobile " />
        <input
          v-model="loginInfo.phone"
          type="tel"
          placeholder="输入手机号"
          class="form-input"
          maxlength="11"
        >
      </div>
      <p class="phone-desc">
        <span>验证手机号（此手机号将作为登录时的个人账号）</span>
      </p>
      <div class="user-info marginBottom51">
        <i class="jeicon jeicon-enterprise " />
        <input
          v-model="loginInfo.enterpriseName"
          type="text"
          placeholder="企业名称"
          class="form-input"
          maxlength="50"
          @tap="close"
        >
      </div>
      <div class="user-info-pwd-message marginBottom51">
        <i class="jeicon jeicon-key " />
        <input
          v-model="loginInfo.validateCode"
          type="number"
          placeholder="输入验证码"
          class="form-input"
          maxlength="6"
          pattern="\d*"
          oninput="if(value.length>6)value=value.slice(0,6)"
          @tap="close"
        >
        <button
          class="get-validate-code"
          @tap="getValidateCode"
        >
          <span v-show="sendAuthCode">获取</span>
          <span v-show="!sendAuthCode">{{ auth_time }}s</span>
        </button>
      </div>
      <div class="user-info marginBottom51">
        <i class="jeicon jeicon-user-o " />
        <input
          v-model="loginInfo.name"
          type="text"
          placeholder="真实姓名"
          class="form-input"
          maxlength="10"
          @tap="close"
        >
      </div>
      <div class="user-info marginBottom51">
        <i class="jeicon jeicon-envelope-o " />
        <input
          v-model="loginInfo.email"
          type="text"
          placeholder="邮箱"
          class="form-input"
          maxlength="40"
          @tap="close"
        >
      </div>
      <div class="user-info ">
        <i class="jeicon jeicon-industry " />
        <input
          v-model="loginInfo.industry"
          type="text"
          placeholder="行业"
          class="form-input"
          readonly
          @tap="show=!show"
        >
        <vue-pickers
          :show="show"
          :columns="columns"
          :default-data="defaultData"
          :select-data="pickData"
          @cancel="close"
          @confirm="confirmFn"
        />
      </div>
      <button
        class="login-btn"
        @tap="register"
      >
        完成
      </button>
    </div>
  </div>
</template>

<script>
import vuePickers from 'vue-pickers';
import { validate, toastValidate } from '../../../../util/validate';

import {
  fetchSendValidateCode,
  fetchAppCreateUser,
  fetchGetIndustry,
  fetchCheckValidate,
} from '../../actions/login';

export default {
  name: 'ThirdPartyLogin',
  components: {
    'vue-pickers': vuePickers,
  },
  data() {
    return {
      loginInfo: {},
      sendAuthCode: true, // 判断
      auth_time: 0,
      show: false,
      columns: 1,
      defaultData: [],
      pickData: {
        data1: [],
      },
      params: {},
    };
  },
  created() {
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
  },
  async mounted() {
    const industryRes = await fetchGetIndustry({ phone: 1 });
    if (industryRes.success) {
      for (const item of industryRes.obj) {
        this.pickData.data1.push({ text: item.DICTIONARYITEM_ITEMNAME, value: item.DICTIONARYITEM_ITEMCODE });
      }
    }
  },
  methods: {
    // 登录
    async register() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
          || !toastValidate('', validate.isPhone(this.loginInfo.phone), '手机号格式不正确')
          || !toastValidate('企业名称', validate.isNull(this.loginInfo.enterpriseName))
          || !toastValidate('验证码', validate.isNull(this.loginInfo.validateCode))
          || !toastValidate('真实姓名', validate.isNull(this.loginInfo.name))
          || !toastValidate('邮箱', validate.isNull(this.loginInfo.email))
          || !toastValidate('', validate.regEmail(this.loginInfo.email), '邮箱格式不正确')
          || !toastValidate('行业', validate.isNull(this.loginInfo.industry), '请选择')
      ) return false;


      const validateCodeRes = await fetchCheckValidate({
        email: this.loginInfo.phone,
        type: 'PHONE',
        cz: 'LOGIN',
        code: this.loginInfo.validateCode,
      });
      if (!validateCodeRes.success) {
        mui.toast(validateCodeRes.msg);
        return false;
      }

      // companyname : 公司名称
      // companyemail : 邮箱
      // username_zh : 手机号
      // type : QQ 或者 WX 或者 DT
      // password : 密码
      // username : 真实姓名
      // tradeName : 行业名称
      // tradeCode : 行业编码(拼音缩写)
      // openId : openId
      // unionId : unionId
      // access_token : access_token

      const joinCompanyRes = await fetchAppCreateUser({
        companyname: this.loginInfo.enterpriseName,
        companyemail: this.loginInfo.email,
        username_zh: this.loginInfo.params.phone,
        type: this.params.type,
        password: this.loginInfo.params.pwd,
        username: this.loginInfo.name,
        tradeName: this.loginInfo.industry,
        tradeCode: this.loginInfo.tradeCode,
        openId: this.params.openid,
        // unionId: this.params.unionId,
        access_token: this.params.access_token,
      });
      if (joinCompanyRes.success) {
        //
      } else {
        mui.toast('注册失败');
      }
    },
    // 获取验证码
    async getValidateCode() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
          || !toastValidate('', validate.isPhone(this.loginInfo.phone), '手机号格式不正确')
      ) return false;
      if (this.sendAuthCode) {
        const res = await fetchSendValidateCode({ email: this.loginInfo.phone, type: 'PHONE', cz: 'ZC' });
        mui.toast(res.msg);
        if (res.success) {
          this.sendAuthCode = false;
          this.auth_time = 59;
          const auth_timetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(auth_timetimer);
            }
          }, 1000);
        }
      }
    },
    close() {
      this.show = false;
    },
    confirmFn(val) {
      this.show = false;
      this.defaultData = [val.select1];
      this.loginInfo.industry = val.select1.text;
      this.loginInfo.tradeCode = val.select1.value;
    },
    toShow() {
      this.show = true;
    }
    ,
  },
};
</script>

<style lang="less" scoped>

  .third-login {
    background: url('../../assets/register-bg.png') no-repeat top center;
    background-size: 100% 276px;
    background-color: #fff;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    .content {

      position: absolute;
      top: 286px;

      .user-info-bg {
        width: 600px;
        height: 96px;
        border-radius: 8px;
        background-color: rgba(241, 241, 241, 1);
        display: flex;
        align-items: center;
        padding-left: 40px;
      }
      .user-info {
        .user-info-bg;
      }

      .form-input {
        width: 462px;
        border-radius: 16px;
        background-color: rgba(241, 241, 241, 1);
        font-size: 28px;
        border: none;
        margin-bottom: 0;
        line-height: normal;
        padding: 0 0 0 40px;
      }

      .marginBottom51 {
        margin-bottom: 46px;
      }
      .user-info-pwd-message {
        .user-info-bg;
        .form-input {
          width: 362px;
        }
        .get-validate-code {
          width: 128px;
          height: 56px;
          line-height: 56px;
          border-radius: 4px;
          background-color: rgba(81, 104, 255, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 30px;
          margin: 0;
          padding: 0;
          text-align: center;
          vertical-align: text-bottom !important;
          position: absolute;
          right: 40px;
        }
      }

      input::-webkit-input-placeholder {
        color: #aab2bd;
      }

      .login-btn {
        margin-top: 56px;
        width: 600px;
        height: 96px;
        //margin-bottom: 110px;
        border-radius: 8px;
        background-color: #536DFE;
        box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
        line-height: 66px;
        color: rgba(255, 255, 255, 1);
        font-size: 36px;
        margin-bottom: 60px;
      }
    }
  }

  .jeicon-envelope-o{
    font-size:25px !important;
  }
  .jeicon {
    color: #cfcfcf;
    font-size: 28px;
  }

  .phone-desc {
    margin-top: 10px;
    font-size: 18px;
    margin-left: 40px;
    color: rgba(61, 60, 60, 1);
    margin-bottom: 5px;
    span {
      font-size: 26px;
    }
  }

</style>
